import React, { useState } from "react";
import { Link } from "react-router-dom";
import { Popper, Typography } from "@mui/material";
import { alpha } from "@mui/material/styles";
import LogoutIcon from "@mui/icons-material/Logout";
import UpdateIcon from "@mui/icons-material/Update";
import DarkModeIcon from "@mui/icons-material/DarkMode";
import LightModeIcon from "@mui/icons-material/LightMode";
import DeleteSweepIcon from "@mui/icons-material/DeleteSweep";
import {
  ColumnFlexBoxCS,
  ColumnFlexBoxCC,
  RowFlexBoxCC,
  RowFlexBoxBC,
} from "../common/Common";
import { PopperButton, PopperTypo } from "./Common";
/**
 * Define MyCenter, a React componment of Hollyweb, Popper example
 * @returns {component} MyCenter component
 * @function MyCenter
 * @static
 */

export default function MyCenter({
  handleLogoutDialog,
  darkMode,
  handleDark,
  userName,
  handleRefreshLocalcacheDialog,
}) {
  // Popover
  const [anchorEl, setAnchorEl] = useState(null);

  const handlePopoverOpen = (event) => {
    setAnchorEl(event.currentTarget);
  };
  const handlePopoverClose = () => {
    setAnchorEl(null);
  };
  const items = [
    {
      text: "个人中心",
      icon: <UpdateIcon fontSize="10" />,
      component: Link,
      link: "/my-setting/update",
    },
    {
      text: darkMode ? "夜间模式" : "日间模式",
      icon: darkMode ? (
        <DarkModeIcon fontSize="10" />
      ) : (
        <LightModeIcon fontSize="10" />
      ),
      callback: handleDark,
      component: "button",
    },
    {
      text: "刷新缓存",
      icon: <DeleteSweepIcon fontSize="10" />,
      callback: handleRefreshLocalcacheDialog,
      component: "button",
    },
    {
      text: "注销退出",
      icon: <LogoutIcon fontSize="10" />,
      callback: handleLogoutDialog,
      component: "button",
    },
  ];
  const popoverOpen = Boolean(anchorEl);
  return (
    <ColumnFlexBoxCC
      onMouseEnter={handlePopoverOpen}
      onMouseLeave={handlePopoverClose}
      sx={{
        height: (theme) => theme.space.barHeight,
      }}>
      <RowFlexBoxCC
        aria-owns={popoverOpen ? "my-center-popover" : undefined}
        aria-haspopup="true"
        sx={{
          color: (theme) => theme.palette.primaryContrast.main,
          mr: 2,
        }}
        component={Link}
        to="/my-setting/update">
        <Typography
          variant="body1"
          sx={{
            color: (theme) => theme.palette.text.main,
            "&:hover": {
              color: (theme) => theme.palette.hover.secondary,
            },
          }}>
          欢迎！{userName}
        </Typography>
      </RowFlexBoxCC>
      <Popper
        id="my-center-popover"
        open={popoverOpen}
        anchorEl={anchorEl}
        sx={{
          pointerEvents: "none",
          zIndex: (theme) => theme.zIndex.drawer + 1,
        }}
        placement="bottom-end"
        onClose={handlePopoverClose}
        elevation={0}>
        <ColumnFlexBoxCS
          sx={{
            borderColor: (theme) => theme.palette.primary.main,
            backgroundColor: "transparent",
            pointerEvents: "auto",
          }}>
          {items.map((b, index) => (
            <RowFlexBoxBC
              key={index}
              sx={{
                borderTop: index > 0 ? 1 : 0,
                borderColor: (theme) => alpha(theme.palette.primary.main, 0.5),
              }}>
              <PopperButton
                sx={{
                  borderTopLeftRadius: index === 0 ? 8 : 0,
                  borderTopRightRadius: index === 0 ? 8 : 0,
                  borderBottomLeftRadius: index === items.length - 1 ? 8 : 0,
                  borderBottomRightRadius: index === items.length - 1 ? 8 : 0,
                }}
                onClick={b.callback}
                component={b.component}
                to={b.link}>
                <PopperTypo variant="body3">{b.text}</PopperTypo>
                <span style={{ paddingRight: "5px" }}>{b.icon}</span>
              </PopperButton>
            </RowFlexBoxBC>
          ))}
        </ColumnFlexBoxCS>
      </Popper>
    </ColumnFlexBoxCC>
  );
}
